<!-- seach START -->
<div class="seach-wrap">
  <div class="seach-lf">
    <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('system:staff:add')">
      新增员工
    </button>
  </div>

  <div nz-space class="seach-rt">
    <div *nzSpaceItem class="seach-item">
      <label class="seach-label">角色</label>
      <div class="seach-control">
        <nz-select
          nzPlaceHolder="请选择角色"
          [(ngModel)]="queryForm.roleId">
          <nz-option *ngFor="let data of roleArr" nzValue="{{data.value}}" nzLabel="{{data.label}}"></nz-option>
        </nz-select>
      </div>
    </div>

    <div *nzSpaceItem class="seach-item">
      <div class="seach-control">
        <nz-input-group nzCompact>
          <nz-select style="min-width: 108px;" [(ngModel)]="queryForm.userNameSelect" (ngModelChange)="queryForm.inputVal = ''">
            <nz-option [nzLabel]="'姓名'" [nzValue]="'1'"></nz-option>
            <nz-option [nzLabel]="'联系方式'" [nzValue]="'2'"></nz-option>
          </nz-select>
          <input
            type="text"
            nz-input
            style="width: 220px;"
            [placeholder]="'请输入' + (queryForm.userNameSelect == '1' ? '姓名' : '联系方式')"
            [(ngModel)]="queryForm.inputVal"
          />
        </nz-input-group>
      </div>
    </div>

    <div *nzSpaceItem class="seach-item">
      <button nz-button nzType="primary" (click)="query()">查询</button>
      <button nz-button nzType="default" (click)="backList()">重置</button>
    </div>
  </div>
</div>
<!-- seach END -->

<main>
  <nz-table #rowSelectionTable nzShowSizeChanger [nzData]="listOfData?.records" [nzShowPagination]="false"
            [nzPageSize]="listOfData?.size" [nzLoading]="tableLoading" nzBordered>
    <thead>
    <tr>
      <!-- <th [(nzChecked)]="checked" (nzCheckedChange)="onAllChecked($event)"></th> -->
      <th nzAlign="center">id</th>
      <th nzAlign="center">姓名</th>
      <th nzAlign="center">联系方式</th>
      <th nzAlign="center">登陆账号</th>
      <th nzAlign="center">角色</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center">创建时间</th>
      <th nzAlign="center">最近登陆时间</th>
      <th nzAlign="center">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngIf="searchHint && listOfData?.records">
      <td class="searchHint" nzAlign="center" colspan="13">
        <span>搜索 “{{searcName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
        <a (click)="backList()">返回原列表</a>
      </td>
    </tr>
    <tr *ngFor="let data of listOfData?.records">
      <!-- <td nzAlign="center" [nzChecked]="data.Checked" (nzCheckedChange)="onItemChecked(data.id, $event)">
      </td> -->
      <!-- id -->
      <td nzAlign="center">{{data.id}}</td>
      <!-- 姓名 -->
      <td nzAlign="center">{{data.realName}}</td>
      <!-- 联系方式 -->
      <td nzAlign="center">{{data.phoneNumber}}</td>
      <!-- 登陆账号 -->
      <td nzAlign="center">{{data.accountNumber}}</td>
      <!-- 角色 -->
      <td nzAlign="center">{{data.roleTxt ? data.roleTxt : '-'}}</td>
      <!-- 状态 -->
      <td nzAlign="center">{{data.state == 0 ? '启用' : '禁用'}}</td>
      <!-- 创建时间 -->
      <td nzAlign="center">{{data.createTime}}</td>
      <!-- 最近登陆时间 -->
      <td nzAlign="center">{{data.lastLoginTime ? data.lastLoginTime : '-'}}</td>
      <!-- 操作 -->
      <td nzAlign="center" class="showPassword">
        <a nz-button nz-button-tdlink nzType="link" (click)="showModal(data.id)"
           *ngIf="permission.userPermission.has('system:staff:edit')">编辑</a>
        <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm [nzIcon]="iconTpl"
           *ngIf="permission.userPermission.has('system:staff:delete')"
           nzPopconfirmTitle="确认删除吗?" (nzOnConfirm)="confirm(data.id)">删除</a>
        <ng-template #iconTpl>
          <i nz-icon nzType="question-circle-o" style="color: red;"></i>
        </ng-template>

        <a nz-button nz-button-tdlink nzType="link" nz-popconfirm nzPopconfirmTitle="确认重置密码吗?" nzOkText="确认"
           *ngIf="permission.userPermission.has('system:staff:resetPassword')"
           nzCancelText="取消" (nzOnConfirm)="resetFun(data)">重置密码</a>
        <font>{{data.generateMixed}}</font>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <div class="pagination-box">
    <div class="pagination-template">
      <ng-template #totalTemplate let-total> 共有 {{ total }} 条</ng-template>
      <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]" nzShowSizeChanger nzShowQuickJumper
                     [nzPageIndex]="listOfData?.current" [nzTotal]="listOfData?.total" [nzShowTotal]="totalTemplate"
                     [nzPageSize]="listOfData?.size" (nzPageIndexChange)="onPageIndexChange($event)"
                     (nzPageSizeChange)="onPageSizeChange($event)">
      </nz-pagination>
    </div>
  </div>
</main>

<nz-modal [(nzVisible)]="isVisible" nzTitle="员工信息" (nzOnCancel)="handleCancel()" [nzFooter]="null">
  <ng-container *nzModalContent>
    <!-- <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()"> -->
    <nz-form-item>
      <nz-form-label [nzSpan]="4"><span style="color: red">*</span>登录账号</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <input nz-input [(ngModel)]="addForm.accountNumber" [maxLength]="20" placeholder="请输入账号"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="!addForm.id">
      <nz-form-label [nzSpan]="4"><span style="color: red">*</span>密码</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <input nz-input [(ngModel)]="addForm.password" placeholder="请输入密码"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4"><span style="color: red">*</span>姓名</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <input nz-input [(ngModel)]="addForm.realName" [maxLength]="20" placeholder="请输入姓名"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">联系方式</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <input nz-input [(ngModel)]="addForm.phoneNumber" [maxLength]="20" placeholder="请输入联系方式"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4"><span style="color: red">*</span>角色</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <nz-checkbox-group [(ngModel)]="addForm.roleList"></nz-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">状态</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <nz-radio-group [(ngModel)]="addForm.state">
          <label nz-radio nzValue="0">启用</label>
          <label nz-radio nzValue="1">禁用</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzSpan]="8" [nzOffset]="4">
        <button nz-button nzType="primary" (click)="submitForm()">保存</button>
      </nz-form-control>
    </nz-form-item>
  </ng-container>
</nz-modal>
